// 项目JS文件的入口
import Vue from 'vue'

// 导入app组件
import app from './App.vue'

// 引入mint-ui组件库
// import { Header,Swipe, SwipeItem,Button,Lazyload  } from 'mint-ui';
// Vue.component(Header.name, Header);
// Vue.component(Button.name, Button);
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.use(Lazyload);
// 但是要使用懒加载，按需导入是不行的，需要全部导入
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'
// 引入MUI样式
import '../lib/mui/css/mui.css'
// 导入MUI的图标拓展样式表
import '../lib/mui/css/icons-extra.css'

// 导入路由包
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import router from './router.js'

// 导入vue-resource
import VueResource from 'vue-resource'
Vue.use(VueResource);
// 使用axio处理get,post请求
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use({ axios, VueAxios});
// 必须要设置这一步，否则找不到axios
Vue.prototype.axios = axios

// 插入格式化时间的插件
import moment from 'moment'
Vue.filter('dateFormat',function(dateStr,pattern="YYYY-MM-DD HH:mm:ss"){
	return moment(dateStr).format(pattern)
})

// 插入缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

// 导入vuex状态管理组件
import Vuex from 'vuex'
Vue.use(Vuex)
/* 
 每次刚进入网站的时候都肯定会调用main.js。先从本地存储中读取car的数据，放到store的car
 
 */
// JSON.parse把json转换为对象
// var car=JSON.parse(localStorage.getItem('car')||'[]')
//现在使用数据库中的数据，所以先取消localStorage

var store=new Vuex.Store({
	state:{
		// 购物车里面的每一个商品可以视为对象，
		//{id:商品id,price:价格,selected:false/true,count:数量}
		car:[],  //使用数据库时
		// car:car,//使用localStorage时
		similary:false, //判断是否有相同商品
		new_count:0, //更新后的数量
		sumsum:0,  //结算的总价格
		countcount:0,  //结算的总数量
	},
	mutations:{
		// 仅用来给初始化(防止多次刷新多加值)
		initShopCar(state,good){
			state.car=(good);
		},
		addShopCar(state,good){
			// 判断是否已在购物车，如果该商品已在购物车，则数量增加即可
			// var flag=false;// 标志 
			state.car.some((item) => {
				if(item.id==good.id){
					// 增加数量
					item.count+=good.count;
					// 然后这个state.new_count是传给数据库修改数据的
					state.new_count=item.count;
					// 这个是判断商品是否已在购物车
					state.similary=true;  //修改标志
					// some方法需要返回true
					return true;
				}
			})
			// 如果不在购物车
			if(!state.similary){
				state.car.push(good);
			}
			// 但是刷新之后会消失之前的数据(因为没存到数据库),所以在这里就存到localstore
			// localStorage.setItem('car',JSON.stringify(state.car))
		},
		updateGoodsinfo(state,goodsinfo){
			// 修改购物车中商品的数量值
			state.car.some(item => {
				if(item.id==goodsinfo.id){
					item.count=parseInt(goodsinfo.count)
					return true
				}
			})
		},
		removeGoodsinfo(state,id){
			// 删除某条在购物车的商品
			state.car.some((item,i) => {
				if(item.id==id){
					state.car.splice(i,1)
					return true;
				}
			})
		},
		updateStatus(state,id){
			state.car.some((item) => {
				if(item.id==id){
					// 修改选中状态
					item.selected=!item.selected;
					
					return true;
				}
			})
		},
		sumCount(state){
			// 每当改变一次状态就重新计算一次
			state.sumsum=0  //总价格
			state.countcount=0
			state.car.forEach(item => {
				// 对于selected=false也就是被选中的那些商品，需要计算价格
				if(!item.selected){
					state.sumsum+=item.sell_price*item.count;
					state.countcount+=item.count;
				}
			})
		},
	    
	},
	getters:{
		getAllcount(state){
			var c=0;
			state.car.forEach((item) => {
				c+=item.count;
			})
			return c;
		}
	},
})

var vm=new Vue({
	el:'#app',
	// app组件上面的内容覆盖
	render: c => c(app),
	router:router,
	store:store,
})
